<template>
	<view class="cohabit-auth">
		<view class="access-l-nav">
			<span class="span"></span>
			<view class="view">人类图像</view>
		</view>
		<view class="auth-top">
			<u-upload :fileList="formData.ImageS" @afterRead="afterRead" @delete="deletePic" name="6" multiple
				:maxCount="1" width="250" height="150">
				<image :src="$imgUrl + '/services/photo-icon.png'" mode="aspectFit"
					class="auth-icon" style="width: 280rpx;height: 282rpx;"></image>
			</u-upload>
		</view>
		<view class="access-l-nav">
			<span class="span"></span>
			<view class="view">身份证</view>
		</view>
		<view class="auth-person">
			<u-upload :fileList="formData.IDrightimges" @afterRead="afterReadA" @delete="deletePicA" name="7" multiple
				:maxCount="1" width="150" height="100">
				<image :src="$imgUrl + '/services/upload-person.png'" mode="aspectFit"
					class="auth-icon" style="width: 280rpx;height: 282rpx;"></image>
			</u-upload>

			<u-upload :fileList="formData.IDReverseimges" @afterRead="afterReadB" @delete="deletePicB" name="8" multiple
				:maxCount="1" width="150" height="100">
				<image :src="$imgUrl + '/services/national-emblem.png'" mode="aspectFit"
					class="auth-icon" style="width: 280rpx;height: 282rpx;"></image>
			</u-upload>
		</view>
		<view class="access-l-nav">
			<span class="span"></span>
			<view class="view">同住人信息</view>
		</view>
		<view class="access-l-top">
			<uni-forms :modelValue="formData" :label-width="150" ref="formRef" :rules="rules">
				<uni-forms-item name="memberName" label="姓名" required>
					<input type="text" v-model="formData.memberName" placeholder="请输入同住人姓名" />
				</uni-forms-item>
				<uni-forms-item name="phone" label="联系电话" required>
					<input type="number" v-model="formData.phone" maxlength="11" placeholder="请输入联系电话" />
				</uni-forms-item>
				<uni-forms-item name="idNumber" label="证件号码" required>
					<input type="text" v-model="formData.idNumber" maxlength="18" placeholder="请输入证件号码" />
				</uni-forms-item>

			</uni-forms>
		</view>
		<view class="submit-btn" @click="submit">提交授权</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from "vue";
	import { useStore } from "vuex"
	import * as Upload from '@/utils/Upload.js'
	import * as API from '@/common/API/prohibit'
	const store = useStore()
	const rules = reactive({
		memberName: {
			rules: [
				{
					required: true,
					errorMessage: '请填写姓名',
				},
			]
		},
		phone: {
			rules: [
				{
					required: true,
					errorMessage: '请填写手机号',
				},
			]
		},
		idNumber: {
			rules: [
				{
					required: true,
					errorMessage: '请填写证件号码',
				},
				{
					validateFunction: function (rule, value, data, callback) {
						let p = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
						if (!p.test(value)) {
							callback('请输入正确身份证号')
						}
						return true
					}
				}
			]
		},

	})
	const formData = reactive({
		memberName: '', //人员姓名
		idNumber: '', //身份证号
		memberType: '3', //人员类型
		phone: '', //手机号
		uploadPath: '1', //上传途径
		renterId: uni.getStorageSync('userInfo').id, //关联承租人id
		renterName: uni.getStorageSync('userInfo').nickname, //关联承租人姓名
		renterPhone: uni.getStorageSync('userInfo').mobile, //关联承租人手机号
		operator: uni.getStorageSync('userInfo').nickname, //操作人
		ImageS: [],
		IDrightimge: [], //省份证正面照片
		IDrightimges: [], //省份证正面照片
		IDReverseimge: [],//省份证反面照片
		IDReverseimges: [],//省份证反面照片
		photoUrl: [], //人脸图片
	})
	const formRef = ref()
	function showToastError(message) {
		uni.showToast({
			title: message,
			icon: 'error',
		});
	}
	const cardId = ref()
	onMounted(() => {

		if (store.state.doorPassCard) {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			uni.setNavigationBarTitle({
				title: '编辑同住人授权'
			});
			const { memberName, idNumber, phone, id, photoUrl, cardPicUrl } = store.state.doorPassCard
			let imgurl = cardPicUrl.split(',')
			cardId.value = id
			formData.memberName = memberName
			formData.idNumber = idNumber
			formData.phone = phone
			formData.ImageS.push({ url: photoUrl })
			formData.photoUrl.push(photoUrl)
			formData.IDrightimge.push(imgurl[0])
			formData.IDrightimges.push({ url: imgurl[0] })
			formData.IDReverseimge.push(imgurl[1])
			formData.IDReverseimges.push({ url: imgurl[1] })
			uni.hideLoading()
		}
	})
	const submit = async () => {
		console.log(formData.photoUrl.length);
		if (!formData.photoUrl.length) {
			uni.showToast({
				title: '请上传人类图像',
				icon: "none"
			});
			return
		} else if (!formData.IDrightimge.length) {
			uni.showToast({
				title: '请上传身份证人像面',
				icon: "none"
			});
			return;
		} else if (!formData.IDReverseimge.length) {
			uni.showToast({
				title: '请上传身份证国徽页',
				icon: "none"
			});
			return;
		}
		if (!formRef) return
		const valid = await formRef.value.validate()
		if (!valid) return
		if (store.state.doorPassCard) {
			const { memberName, idNumber, phone } = formData
			let photoUrl = formData.photoUrl.join(',')
			let combinedArray = formData.IDrightimge.concat(formData.IDReverseimge)
			let cardPicUrl = combinedArray.join(',')
			await API.faceedit({ memberName, idNumber, phone, photoUrl, id: cardId.value, cardPicUrl })
		} else {
			let { memberName, idNumber, memberType, phone, uploadPath, renterId, renterName, renterPhone, operator } = formData
			let photoUrl = formData.photoUrl.join(',')
			let combinedArray = formData.IDrightimge.concat(formData.IDReverseimge)
			let cardPicUrl = combinedArray.join(',')
			const param = {
				memberName, idNumber, memberType, phone, uploadPath, renterId,
				renterName, renterPhone, operator, photoUrl, cardPicUrl
			}
			await API.createface(param)

		}
		uni.navigateBack({
			delta: 1
		})
	}

	const afterRead = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file)
		let fileListLen = formData.ImageS.length
		lists.map((item) => {
			formData.ImageS.push({
				...item,
				status: 'uploading',
				message: '上传中'
			})
		})
		for (let i = 0; i < lists.length; i++) {
			const result = await Upload.uploadFilePromise(lists[i].url)
			console.log(result);
			formData.photoUrl.push(result.data.pathUrl)
			let item = formData.ImageS[fileListLen]
			formData.ImageS.splice(fileListLen, 1, Object.assign(item, {
				status: 'success',
				message: '',
				url: result
			}))
			fileListLen++
		}
	}
	const afterReadA = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file)
		let fileListLen = formData.IDrightimges.length
		lists.map((item) => {
			formData.IDrightimges.push({
				...item,
				status: 'uploading',
				message: '上传中'
			})
		})
		for (let i = 0; i < lists.length; i++) {
			const result = await Upload.uploadFilePromise(lists[i].url)
			formData.IDrightimge.push(result.data.pathUrl)
			let item = formData.IDrightimges[fileListLen]
			formData.IDrightimges.splice(fileListLen, 1, Object.assign(item, {
				status: 'success',
				message: '',
				url: result
			}))
			fileListLen++
		}
	}
	const afterReadB = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file)
		let fileListLen = formData.IDReverseimges.length
		lists.map((item) => {
			formData.IDReverseimges.push({
				...item,
				status: 'uploading',
				message: '上传中'
			})
		})
		for (let i = 0; i < lists.length; i++) {
			const result = await Upload.uploadFilePromise(lists[i].url)
			formData.IDReverseimge.push(result.data.pathUrl)
			let item = formData.IDReverseimges[fileListLen]
			formData.IDReverseimges.splice(fileListLen, 1, Object.assign(item, {
				status: 'success',
				message: '',
				url: result
			}))
			fileListLen++
		}
	}
	const deletePic = (event) => {
		formData.ImageS.splice(event.index, 1)
		formData.photoUrl.splice(event.index, 1)
	}
	const deletePicA = (event) => {
		formData.IDrightimge.splice(event.index, 1)
		formData.IDrightimges.splice(event.index, 1)
	}
	const deletePicB = (event) => {
		formData.IDReverseimge.splice(event.index, 1)
		formData.IDReverseimges.splice(event.index, 1)
	}
</script>
<style lang="scss" scoped>
	.cohabit-auth {
		padding-bottom: 100rpx;

		.auth-top {
			padding: 60rpx 0;
			background: #fff;
			text-align: center;

			.auth-icon {
				width: 280rpx;
				height: 282rpx;
			}
		}

		.access-l-nav {
			padding: 32rpx;
			display: flex;
			align-items: center;

			.view {
				display: inline-block;
			}

			.span {
				width: 8rpx;
				height: 28rpx;
				border-radius: 228rpx;
				display: inline-block;
				margin-right: 16rpx;
				background: rgba(253, 150, 24, 1);
			}
		}

		.access-l-top {
			padding: 0 32rpx;
			background: #fff;
		}

		.uni-forms-item {
			border-bottom: 2rpx solid #f5f5f5;
			background: #fff;
			align-items: center;
			padding: 20rpx 0;
			margin: 0;

			uni-input {
				font-size: 28rpx;
			}

			::v-deep.uni-input-wrapper {
				text-align: right;
			}

			::v-deep.uni-forms-item__label {
				color: rgba(77, 77, 77, 1);
				font-size: 32rpx;
			}

			.check-icon {
				width: 16rpx;
				height: 28rpx;
				margin-left: 20rpx;
			}

			.check-box {
				display: flex;
				align-items: center;
				justify-content: right;
			}
		}
		::v-deep.uni-forms-item__content{
			display: flex;
			align-items: center;
		}
		.auth-person {
			background: #fff;
			padding: 50rpx 20rpx;
			display: flex;
			align-items: center;

			&>view:nth-of-type(2) {
				margin-left: 38rpx;
			}
		}

		.submit-btn {
			margin: 60rpx 32rpx 0;
			width: 686rpx;
			height: 84rpx;
			border-radius: 200rpx;
			color: #fff;
			background: rgba(253, 150, 24, 1);
			font-size: 32rpx;
			text-align: center;
			line-height: 84rpx;
		}
	}

	::v-deep .u-upload__wrap__preview {
		margin: 0 auto;
	}

	::v-deep .u-upload__wrap {
		margin: 0 auto;
	}
</style>